<script setup lang="ts">
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import UploadIcon from "@iconify-icons/ri/upload-2-line";
import { usePublicFormats } from "../../formats";
import { EditorUpload } from "./components";
import { onBeforeUnmount, ref, shallowRef } from "vue";
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { baseUrlApi } from "../../../api/utils";
import Segmented from "@/components/ReSegmented";

const props = withDefaults(defineProps<FormProps>(), {
  id: String, // 添加 id prop
  formInline: () => ({
    fileList: [],
    class_id: 0,
    title: "",
    introduce: "",
    content: "",
    clicks: 0,
    is_top: 0,
    sort: 0
  })
});

import { isTopOptions } from "./utils/enums";

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const { parkListOptions } = usePublicFormats();

defineExpose({ getRef });

defineOptions({
  name: "picUpload"
});

const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const toolbarConfig: any = { excludeKeys: "fullScreen" };
const editorConfig = { placeholder: "请输入内容...", MENU_CONF: {} };

// 更多详细配置看 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
editorConfig.MENU_CONF["uploadImage"] = {
  // 服务端上传地址，根据实际业务改写
  server: baseUrlApi("upload"),
  // form-data 的 fieldName，根据实际业务改写
  fieldName: "file",
  // 选择文件时的类型限制，根据实际业务改写
  allowedFileTypes: ["image/png", "image/jpg", "image/jpeg"],
  // 自定义插入图片
  customInsert(res: any, insertFn) {
    // res.data.url是后端返回的图片地址，根据实际业务改写
    if (res.data.url) {
      setTimeout(() => {
        // insertFn插入图片进编辑器
        insertFn(res.data.url);
      }, 2000);
    }
  }
};

const handleCreated = editor => {
  // 记录 editor 实例，重要！
  editorRef.value = editor;
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-form-item label="分类" prop="class_id">
      <el-select
        v-model="newFormInline.class_id"
        placeholder="请选择分类"
        clearable
      >
        <el-option label="新闻" :value="1" />
        <el-option label="帮助" :value="2" />
        <el-option label="关于我们" :value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="标题" prop="title">
      <el-input
        v-model="newFormInline.title"
        clearable
        placeholder="请输入标题"
      />
    </el-form-item>
    <el-form-item label="简介" prop="introduce">
      <el-input
        v-model="newFormInline.introduce"
        placeholder="请输入简介"
        type="textarea"
      />
    </el-form-item>
    <el-form-item label="封面图" prop="fileList">
      <el-upload
        ref="uploadRef"
        v-model:file-list="newFormInline.fileList"
        drag
        multiple
        action="#"
        :limit="1"
        class="!w-[200px]"
        :auto-upload="false"
        :rules="[{ required: true, message: '图片不能为空' }]"
      >
        <div class="el-upload__text">
          <IconifyIconOffline
            :icon="UploadIcon"
            width="26"
            class="m-auto mb-2"
          />
          可点击或拖拽上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input
        v-model="newFormInline.sort"
        clearable
        placeholder="请输入排序值,越大越靠前"
        type="number"
      />
    </el-form-item>
    <el-form-item label="内容" prop="content">
      <div class="wangeditor">
        <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
          style="border-bottom: 1px solid #ccc"
        />
        <Editor
          v-model="newFormInline.content"
          :defaultConfig="editorConfig"
          :mode="mode"
          style="height: 500px; overflow-y: hidden"
          @onCreated="handleCreated"
        />
      </div>
    </el-form-item>
    <el-form-item label="浏览量">
      <el-input
        v-model="newFormInline.clicks"
        clearable
        placeholder="请输入浏览量"
        type="number"
      />
    </el-form-item>
    <el-form-item label="置顶">
      <Segmented
        :modelValue="newFormInline.is_top ? 0 : 1"
        :options="isTopOptions"
        @change="
          ({ option: { value } }) => {
            newFormInline.is_top = 1;
          }
        "
      />
    </el-form-item>
  </el-form>
</template>
